<template>
  <div class="login-container"> 
      <!-- 
      :model表单数据对象
      :rules表单验证规则
     -->
    <el-form
      :model="user"
      ref="user"
      :rules="loginFormRules"
      class="login-from"
      size="mini"
    > 
      <h2 class="login-title">扶贫管理平台</h2>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" placeholder="长度5-10"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="userage">
        <el-input v-model="user.userage"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="usernumber">
        <el-input v-model="user.usernumber"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="user.email"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="submitForm()"
          >注册</el-button
        >
        <el-button type="warning" @click="field('user')">重置</el-button>
        <el-button type="success" @click="goLogin">去登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name:'Login',
  data() {
    return {
      user: {
        username: "",
        password: "",
        name:"",
        userage:"",
        usernumber:"",
        email:''
      },
      // loginFormRules 通过rules属性传入约定的验证规则
      loginFormRules: {
        // username 需要被效验的字段名
        username: [
          // 表示当鼠标失去焦点时,验证,必填项,如果为空,就显示message内容
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 5, max: 10, message: "用户名5-10位", trigger: "blur" },
        ],
        password: [
          // 表示当鼠标失去焦点时
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        name: [
          // 表示当鼠标失去焦点时
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { min: 2, max: 4, message: "用户名2-4位", trigger: "blur" },
        ],
        userage:[
          { required: true, message: '年龄不能为空',trigger: "blur"},
          { type: 'number', message: '年龄必须为数字值',trigger: "blur"},
          { min: 1, max: 2, message: "年龄错误", trigger: "blur" },
        ],
        usernumber:[
          {required: true, message: '请填写联系人电话', trigger: 'blur'},
          { type: 'number', message: '电话必须为数字值',trigger: "blur"},
        ],
        email:[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
    };
  },
  methods: {
    submitForm() {
      this.$router.push('/home')
    },
      goLogin() {
      this.$router.push('/login')
    },
    field(user){
      this.$refs[user].resetFields(); 
    }
  }
};

</script>

 <style lang="scss" scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.login-from {
  width: 25%;
  margin: 20px auto;
  background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
  border-radius: 10px;
  padding: 20px;
}
.login-title {
  color: rgb(62, 65, 60);
  text-align: center;
}
.el-form-item{
  padding: 0px;
}
</style>